/**
 * RippleButton
 */
import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableNativeFeedback,
} from 'react-native';

const RippleButton = ({
  onPress = () => {},
  color = '#108eeb',
  rippleColor = '#fff',
  radius = 5,
  wrapperStyle,
  textStyle,
  icon,
  children,
  iconRight,
  ...props
}) => {
  return (
    <TouchableNativeFeedback
      onPress={onPress}
      background={TouchableNativeFeedback.Ripple(rippleColor, false)}
      {...props} >
      <View
        style={[
          styles.wrapper,
          {
            backgroundColor: color,
            borderRadius: radius,
          },
          wrapperStyle,
        ]}>
        {/* <Icon name="delete" size={20} color="#e91e61" /> */}
        {iconRight ? null : icon}
        {/* put text directly in the component tag */}
        {children &&
          <Text
            style={[
              styles.text,
              (children && icon && !iconRight) && { marginLeft: 6 },
              iconRight && { marginRight: 6 },
              textStyle,
            ]}>
            {children}
          </Text>
        }
        {iconRight ? icon : null}
      </View>
    </TouchableNativeFeedback>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    paddingVertical: 8,
    paddingHorizontal: 18,
    elevation: 3,
    flexDirection: 'row',
    justifyContent: 'center',
  },

  text: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
  },
});

export default RippleButton;

